// @font-face {
//   font-family: "icons-turn-arrow";
//   src: url("../fonts/icons/turn-arrow.eot") format("embedded-opentype"), url("../fonts/icons/turn-arrow.woff") format("woff"), url("../fonts/icons/turn-arrow.ttf") format("truetype"), url("../fonts/icons/turn-arrow.svg") format("svg");
// }

html, body {
  width: 100%;
  height: 100%;

  background-color: #222;
}

.app {
  color: #fff;
}
.content {
  width: 100%;
  height: 100%;
}

/* stage -- start */
.stage {
  position: relative;

  width: 100%;
  height: 638px;
}
/* stage -- end */

/* image -- start */
.img-sec {
  position: relative;

  width: 100%;
  height: 100%;
  overflow: hidden;

  background-color: #ddd;

  perspective: 1800px;

  .one-img{
    width: 80px;
    height: 80px;
  }
  @at-root {
      .img-figure {
          position: absolute;

          width: 320px;
          height: 360px;
          margin: 0;
          padding: 40px;

          background-color: #fff;

          box-sizing: border-box;
          cursor: pointer;
          transform-origin: 0 50% 0;
          transform-style: preserve-3d;
          transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;

          &.is-inverse {
              transform: translate(320px) rotateY(180deg);
          }
      }

      figcaption {
          text-align: center;

          .img-title {
              margin: 20px 0 0 0;

              color: #a7a0a2;
              font-size: 16px;
          }

          .img-back {
            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;
            padding: 50px 40px;
            overflow: auto;

            color: #a7a0a2;
            font-size: 22px;
            line-height: 1.25;
            text-align: left;

            background-color: #fff;

            box-sizing: border-box;
            transform: rotateY(180deg) translateZ(1px);
            backface-visibility: hidden;

            p {
              margin: 0;
            }
          }
      }
  }

}
/* image -- end */

/* controller -- start */
.controller-nav {
  position: absolute;
  left: 0;
  bottom: 30px;
  z-index: 101;

  width: 100%;

  text-align: center;

  @at-root {
      .controller-unit {
          display: inline-block;
          margin: 0 5px;
          width: 30px;
          height: 30px;

          text-align: center;
          vertical-align: middle;

          cursor: pointer;
          background-color: #aaa;
          border-radius: 50%;

          transform: scale(.5);
          transition: transform .6s ease-in-out, background-color .3s;

          &.is-center {
              background-color: #888;

              transform: scale(1);

              &::after {
                  color: #fff;
                  font-family: "icons-turn-arrow";
                  font-size: 80%;
                  line-height: 30px;

                  content: "\e600";

                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
              }

              &.is-inverse {
                  background-color: #555;

                  transform: rotateY(180deg);
              }
          }
      }
  }
}
/* controller -- end */
